<template>
  <div>
    <van-cell class="spaceDiv" :class="{success:isFree == 0,error:isFree != 0}">
      <!-- 标题区域的插槽 -->
      <template #title>
        <div class="title-box">
          <!-- 标题 -->
          <span>停车场名称:{{ name }}</span>
        </div>
        <!-- 三张图片 -->
        <div class="thumb-box">
          <ul>
              <li>停车位id:{{ id }}</li>
              <li>空闲状态:<span v-if="isFree == 0">空闲</span> <span v-else>忙碌</span></li>
              <li>是否有充电桩:<span v-if="isChargingPile == 1">有</span> <span v-else>无</span></li>
          </ul>
          <ul v-if="isFree == 0">
            <van-button style="border-radius: 15px 15px 15px 15px;" type="primary" @click="showPrompt">开始停车</van-button>
          </ul>
          <ul  v-if="isFree == 1">
              <li>车牌号:{{ licensePlateNumber }}</li>
              <li>停车时间:{{ startTime }}</li>
          </ul>
        </div>
      </template>
    </van-cell>

    <!-- 自定义弹窗 -->
    <van-popup v-model="popupVisible" position="bottom">
      <div style="padding: 20px;">
        <van-field v-model="form.licensePlateNumber" label="车牌号" placeholder="请输入车牌号"></van-field>
        <div style="display: flex; justify-content: space-between; margin-top: 20px;">
          <van-button @click="popupVisible = false">取消</van-button>
          <van-button type="primary" @click="submitForm">确定</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {warehousing} from '@/api/spaceAPI.js'
export default {
  name: 'SpaceComponent',
  // 自定义属性
  props: {
    name: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    isChargingPile: {
      type: String,
      default: ''
    },
    isFree: {
      type: String,
      default: ''
    },
    licensePlateNumber: {
      type: String,
      default: ''
    },
    startTime: {
      type: String,
      default: ''
    },
    isSuccess:true
  },
  data() {
    return {
      popupVisible: false,
      form: {
        licensePlateNumber: ''
      }
    }
  },
  methods: {
    showPrompt() {
      this.popupVisible = true
    },
    async submitForm() {
      // 提交表单
      console.log(this.form.licensePlateNumber)
      var data1 = {
        id: this.id,
        licensePlateNumber: this.form.licensePlateNumber
      }
      const { data: res } = await warehousing(data1)
      console.log("res", res)
      // 模拟停车成功或失败
      if (res.status === 200) {
        this.$toast.success('停车成功')
      } else {
        this.$toast.fail('停车失败')
      }
      this.popupVisible = false
      this.notifyParent()
    },
    notifyParent() {
      this.$emit('refresh-data');
    },
  }
}
</script>

  
  <style lang="less" scoped>
  .label-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .thumb {
    // 矩形黄金比例：0.618
    width: 113px;
    height: 70px;
    background-color: #f8f8f8;
    object-fit: cover;
  }
  
  .title-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  
  .thumb-box {
    display: flex;
    justify-content: space-between;
  }

  .spaceDiv {
    box-shadow:0px 0px 1px #000;
    margin-top: 10px;
    border-radius: 15px 15px 15px 15px;
    &.success {
        background-color:rgb(164, 211, 164);
    }
    &.error{
      background-color: #eba3a3;
    }
  }
  
  </style>
  